<template>
  <div class="audio-bar">
    <div class="audio-bar-inner weui-flex v-mdl" style="height: 40px;">
      <div class="audio-bar-play pdr-s">
        <a v-if="playStatus == 'unstart'" @tap.stop="audioPlay"><i class="if icon-play"></i></a>
        <a v-if="playStatus == 'ended'" @tap.stop="audioPlay"><i class="if icon-play"></i></a>
        <a v-if="playStatus == 'playing'" @tap.stop="audioPause"><i class="if icon-pause"></i></a>
        <a v-if="playStatus == 'paused'" @tap.stop="audioContinue"><i class="if icon-play"></i></a>
        <!-- <a v-if="playStatus == 'waitting'"><i class="fi icon-bofang1 waitting"></i></a> -->
      </div>
      <div class="weui-flex__item pdl" @touchstart="onChangeStart">
        <slider :value="currentPercent" @change="onSeek"
          backgroundColor="#C3EEF2"
          selected-color="#00CFCB" :block-size="16"/>
      </div>
      <div style="font-size: 12px;" class="ta-c">
        {{leftTimeName}}
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

const COS_ADDR = process.env.COS_ADDR

export default {
  props: {
    rn: 0,
    play: [Boolean],
    path: {
      type: String
    },
    size: {
      type: Number,
      default: 0
    },
    duration: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      playStatus: 'unstart',
      currentTime: 0,
      currentPercent: 0
    }
  },
  computed: {
    ...mapGetters([
      'ex',
      'destroyMedia',
    ]),
    srcUrl() {
      if (this.path.indexOf('//') >= 0) return this.path
      return COS_ADDR + this.path
    },
    durationSeconds() {
      return Math.ceil(this.duration / 1000)
    },
    leftTime() {
      let t = this.durationSeconds - this.currentTime
      if (t <= 0) t = 0
      return t
    },
    leftTimeName() {
      let lf = Math.round(this.leftTime)
      let s = lf % 60
      let m = Math.round(lf / 60)
      if (s < 10) s = '0' + s
      if (m < 10) m = '0' + m
      return `${m} : ${s}`
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    ...mapActions([
      'setEx'
    ]),
    onChangeStart () {
      this.cs = this.playStatus
      this.playStatus = 'paused'
    },
    getDurationSecond() {
      return Math.ceil(this.duration / 1000)
    },
    init() {
      this.currentPercent = 0
      this.currentTime = 0
      this.audioCtx = wx.createInnerAudioContext()
      this.audioCtx.obeyMuteSwitch = false
      this.audioCtx.src = this.srcUrl
      this.audioCtx.onPlay(() => {
        this.$emit('play', this.path)
      })
      this.audioCtx.onEnded(() => {
        this.playStatus = 'ended'
      })
      this.audioCtx.onTimeUpdate(() => {
        this.currentTime = this.audioCtx.currentTime
        this.currentPercent = Math.round(
          this.currentTime * 1000 / this.duration * 100
        )
      })
    },
    audioPlay() {
      this.playStatus = 'playing'
    },
    audioPause() {
      this.playStatus = 'paused'
    },
    audioContinue() {
      this.playStatus = 'playing'
    },
    onSeek(e) {
      if (!this.audioCtx) return
      this.currentPercent = e.target.value
      let seek = this.currentPercent / 100 * this.durationSeconds
      seek = Math.round(seek)
      this.audioCtx.seek(seek)
      this.playStatus = this.cs
    }
  },
  watch: {
    ex (nv) {
      if (!nv) return
      if (nv === this.path) return
      this.playStatus = 'paused'
    },
    destroyMedia (nv) {
      if (nv !== this.srcUrl) return
      this.audioCtx.destroy()
    },
    path(nv) {
      if (!nv) return
      this.init()
    },
    playStatus(nv) {
      if (nv === 'playing') {
        this.setEx(this.path)
        this.audioCtx.play()
      } else if (nv === 'paused') {
        this.audioCtx.pause()
      } else if (nv === 'stop') {
        this.audioCtx.stop()
      } else if (nv === 'ended') {
        this.currentPercent = 0
        this.currentTime = 0
        // this.getDurationSecond = Math.ceil(this.duration / 1000)
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';
.audio-bar {
  width: 100%;
  position: relative;
}
.audio-bar-inner {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
  background-color: rgba(0,173,202, 0.05);
  padding: 16px;
}
.audio-bar-time {
  position: absolute;
  right: 0;
  bottom: 0px;
  font-size: @fs-s;
}
.audio-bar-play {
  color: @colorTeal;
}
a {
  cursor: pointer;
}
i {
  font-size: 1.6 * @baseSize;
  position: relative;
  top: 1px;
  &.waitting {
    color: gray;
  }
}
slider {
  margin: 0;
}
</style>
